<template>
	<navigator :url="'/pages/article/detail?id='+item.id">
		<view class="content" @longpress="doAct(item)">
			<view class="top">
				<view class="left">
					<view class="title">{{item.title}}</view>
					<view class="t-content">{{item.content}}</view>
				</view>
				<view class="right">
					<view class="status" v-if="item.status == 0">待审核</view>
					<view class="status normal" v-if="item.status == 1">正常</view>
					<view class="status banner" v-if="item.status == 2">违禁</view>
				</view>
			</view>
			<view class="bottom">
				<view class="left">
					<view class="item read">
						<uni-icons type="eye"></uni-icons>{{item.heat}}
					</view>
					<view class="item read">
						<uni-icons type="chatbubble"></uni-icons>{{item.comment}}
					</view>
					<view class="item category">
						<uni-icons type="paperplane"></uni-icons>{{item.category ? item.category.cate_name : '推荐'}}
					</view>
				</view>
				<view class="right">
					<view class="time">{{item.create_time}}</view>
				</view>
			</view>

		</view>
	</navigator>
</template>

<script setup>
	defineProps(['item'])
	import {
		ref
	} from 'vue';
	import {
		apiDelArt
	} from '@/api/apis';

	const doAct = (item) => {
		uni.showActionSheet({
			itemList: ['编辑', '删除'],
			success: (res) => {
				if (res.tapIndex == 0) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					uni.navigateTo({
						url: "/pages/article/edit?id=" + item.id
					})
				} else if (res.tapIndex == 1) {
					uni.showModal({
						title: "温馨提示",
						content: "确定要删除这篇文章吗?",
						success: async res => {
							if (res.confirm) {
								await apiDelArt({
									id: item.id
								}).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: "删除成功"
										})
									}
								})
							}
						}
					})
				}
			}
		});
	}
	const touchAct = () => {
		setTimeout(() => {
			isShowModel.value = !isShowModel.value
		}, 2000)
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		border-bottom: 2rpx solid #eee;
		position: relative;

		.top,
		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.top {
			width: 100%;

			.left {
				width: 80%;
			}

			.title {
				font-size: 32rpx;
				color: #000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.t-content {
				color: #6b7280;
				font-size: 28rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.status {
				background-color: #eee;
				color: $theme-color;
				padding: 10rpx;
				font-size: 25rpx;
			}

			.normal {
				color: mediumspringgreen;
			}

			.banner {
				color: orangered;
			}
		}


		.bottom {
			.left {
				display: flex;
				align-items: center;

				.item {
					margin-right: 10rpx;
					font-size: 20rpx;
					display: flex;
					align-items: center;
				}
			}

			.time {
				color: #6b7280;
				font-size: 24rpx;
			}
		}
	}
</style>